<template>
  <div>
    <form @keyup.enter="login">
      <div class="item">
        <input v-model.trim="username" class="input" placeholder="手机/用户名" type="text">
        <i class="iconfont icon-personal user" />
        <div class="box">
          <div v-show="userState" class="error-msg">{{ hintUser }}</div>
        </div>
      </div>
      <div class="item">
        <input v-model="password" class="pass-input" placeholder="请输入密码" type="password">
        <i class="iconfont icon-password pass" />
        <div class="box">
          <div v-show="passState" class="error-msg">{{ hintPass }}</div>
        </div>
      </div>
      <span>
        <div class="btn" @click="login">
          <button class="login-btn" type="button" :disabled="disabled" v-text="loginContent">登录</button>
        </div>
        <div class="function">
          <span @click="toRegister">免费注册</span>
          <span @click="toPassword">忘记密码?</span>
        </div>
      </span>
    </form>
  </div>
</template>

<script>
import { passwordLogin } from '@/api/login'
import { REGEX_MOBILE_EMAIL } from '@/js/regex'
export default {
  name: 'Account',
  data() {
    return {
      username: undefined,
      password: undefined,
      disabled: false,
      loginContent: '登录',
      hintUser: '',
      hintPass: '',
      userState: false,
      passState: false
    }
  },
  methods: {
    toRegister() {
      this.$emit('registered')
    },
    toPassword() {
      this.$emit('password')
    },
    login() {
      if (!this.username) {
        this.hintUser = '请先填写账号'
        this.userState = true
        return
      }
      if (!REGEX_MOBILE_EMAIL.test(this.username)) {
        this.userState = true
        this.hintUser = '账号格式不正确'
        return
      }
      if (!this.password) {
        this.hintPass = '请先填写密码'
        this.userState = false
        this.passState = true
        return
      }
      this.disabled = true
      this.loginContent = '登录中...'
      passwordLogin(this.username, this.password).then(response => {
        this.$store.dispatch('setToken', response.data)
        const spuRepoId = this.$route.params.spuRepoId
        if (spuRepoId) {
          location.reload()
          return
        }
        let redirect = this.$route.query.redirect
        if (redirect) {
          const index = redirect.split('redirect')
          redirect = index.length > 0 ? index[index.length - 1].replace('=', '') : redirect
          this.$router.push({
            path: decodeURIComponent(redirect)
          })
        } else {
          this.$router.push('/')
        }
      }).catch(() => {
        this.disabled = false
        this.loginContent = '登录'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  text-align: center;
  .iconfont {
    position: absolute;
  }
  .item {
    position: relative;
    .user {
      font-size: 24px;
      top: 26px;
      left: 35px;
    }
    .box{
      height: 28px;
    }
    .error-msg{
      text-align: left;
      padding-left: 20px;
      color: #f56c6c;
    }
    .pass {
      font-size: 22px;
      top: 7px;
      left: 38px;
    }
    .key {
      font-size: 20px;
      top: 25px;
      left: 36px;
    }
    .pass-input{
      width: 317px;
      height: 42px;
      border: 1px solid #e5e5e5;
      text-indent: 44px;
    }
    .input {
      width: 317px;
      height: 42px;
      border: 1px solid #e5e5e5;
      margin-top: 20px;
      text-indent: 44px;
    }
    .input-1 {
      width: 225px;
      height: 42px;
      border: 1px solid #e5e5e5;
      margin: 20px 0 15px 0;
      text-indent: 44px;
    }
    .btn-input {
      width: 92px;
      height: 42px;
      background: #f1f1f1;
      color: #8e8e93;
    }
  }
  .bottom-item {
    position: relative;
    .bottom {
      width: 92px;
      height: 42px;
      background: #f1f1f1;
      color: #8e8e93;
      text-align: center;
      line-height: 42px;
      font-size: 14px;
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
    }
  }
  .function {
    display: flex;
    justify-content: space-between;
    margin: 10px 20px 0 20px;
    span {
      cursor: pointer;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 317px;
    height: 42px;
    background: #ff3b30;
    border-radius: 6px;
    margin: 0 0 0 20px;
    cursor: pointer;
    .login-btn {
      font-size: 20px;
      color: #ffffff;
    }
  }
}
</style>
